<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {showToast} from "vant";
import myAxios from "../plugins/myAxios.ts";

const route = useRoute()
const router = useRouter()
const onClickLeft = () => {
  router.push('/select')
}
const showStr = ref()
const showStr2 = ref()


onMounted(() => {
  console.log(route.query.count)
  console.log(route.query.mistake)
  showStr.value = route.query.count
  showStr2.value = route.query.mistake
  //
  myAxios.get('/user/gain/exp', {
    params: {
      count:route.query.count,
    }
  }).then(res => {
    if(route.query.count != null){
      flag.value = parseInt(route.query.count as string)
    }

    console.log(res)
    showToast("获取经验值：" +flag.value * 5)
  }).catch(err => {
    console.log(err)
  })

})
const flag = ref(0)
</script>

<template>
  <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft"/>
<div class="result-container">
  <div style="width: 100%; height: 100%;" class="result-page">
    <p style="font-size: 30px; color: #fff; text-align: center;">
      你总共答对{{ showStr }}题，得分{{showStr * 5}}分

    </p>
  </div>
</div>

</template>

<style scoped>
.back-btn1 {
  position: fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index: 2;
}
.result-page {

  width: 100%;
  height: 100%;
}
.result-container {
  background-image: url("../assets/结果背景.png");
  width: 100%;
  height: 100%;
  background-size: cover;
}

</style>